<template>
  <div class="notfound" ref="bgstar">
    <img src="../../assets/images/404_for.png" class="img404" >
    <span
    v-for="(item,i) 
    in spanNum" 
    :key="i"
    :style="{top:item.y,left:item.x,transform:'scale('+item.scaler+')',animationDelay:item.rate,backgroundColor:item.rgb}"
    class="span-dots"
    ></span>
  </div>
</template>

<script>
import { mymixins } from "@/utils/index"; //引入混入
export default {
  mixins: [mymixins],
  data() {
    return {
      spanNum: [],
    };
  },
  mounted() {
    var screenW = this.$refs.bgstar.clientWidth;
    var screenH = this.$refs.bgstar.clientHeight; //这里是标记了页面，获取这个页面的最大值，之后用于生成span的随机位置
    for (var i = 0; i < 550; i++) {
      //获取随机位置
      var x = parseInt(Math.random() * screenW);
      var y = parseInt(Math.random() * screenH);
      //大小随机
      var scaler = Math.random() * 1.5;
      //频率随机
      var rate = Math.random() * 2.5;
      //颜色随机,此时用到了混入中写好的函数
      var r = this.ranFun(10, 250);
      var g = this.ranFun(10, 250);
      var b = this.ranFun(10, 250);
      //将所有内容push到写好的this的空数组spanNum中
      this.spanNum.push({
        x: x + "px",
        y: y + "px",
        scaler: scaler,
        rate: rate + "s",
        rgb: `rgb(${r},${g},${b})`,
      });
    }
  },
};
</script>

<style lang="scss" scoped>
.notfound {
  width: 100%;
  height: 100%;
  background: black;
  overflow: hidden;
  position: relative;
}

.img404 {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  margin: auto;
}
.span-dots {
    position: absolute;
    animation: flash 2s alternate infinite;/* 动画写法 */
    width: 3.5px;
    height: 3.5px;
    border-radius: 50%;
    /* background: #fff; */
  }
   @keyframes flash {/*动画效果 */
    0% {
      opacity: 0;
    }
    100% {
      opacity: 0.5;
    }
  }
</style>